<template>
    <div class="">
        <h1>微信获取用户基本信息</h1>
        <p>code: {{code}}</p>
        <img :src="user.headimgurl" alt="">
        <p>昵称: {{user.nickname}}</p>
        <p>openId{{user.openid}}</p>
    </div>
</template>

<script>
// 微信公众号开发 只支持 history mode
const appid = 'wxb10344d6be4e46ee';
// 重定向的url
const redirectUrl = 'http://bufantec.natapp1.cc/wx';
// 引导用户获取授权页的url
var userinfo_url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// 已经对接微信服务器的后台程序(需要后台自行实现)
var serveHost = 'http://www.bufantec.com';
// 后台给定的api接口,用于根据前台已经获取的code给微信服务器对象,换取access_token,以及利用access_token换取更多信息
var userInfoApi = `${serveHost}/wx/user/getUserInfo?appid=${appid}&code=`;
import axios from 'axios'
export default {
    components: {

    },
    data() {
        return {
            code: '',
            user: {}
        };
    },
    computed: {

    },
    created() {
        // 一旦经过用户手动授权 同意  地址栏会现实 携带code的url  
        // http://bufantec.natapp1.cc/wx?code=061UFoJf1HvOgu0cIcKf1yrtJf1UFoJr&state=STATE
        // a. 通过url解析code   
        this.code = this.getUrlParams('code')
        // 2. 引导用户访问微信授权页面  强制刷新
        // b. 避免死循环
        if(this.code){
            // 用code去后台换取access_token
            console.log('code',this.code); 
            // access_token 是后台的api  所以bufan的后台全部帮你实现了 
            /**
             * 前提: 1. 配置服务器认证(写死,不凡后台提供接口)
                    a: URL http://bufantec.com/wx/msg
                    b: token bufanxueyuan
                  2. JS接口安全域名修改
                    a: 域名   xxxx.natapp1.cc  个人穿透地址
                  3. 体验接口权限表=> 网页帐号=> 网页授权获取用户基本信息
                    a: 授权回调页面域名 xxxx.natapp1.cc  个人穿透地址
                接口:  /wx/user/getUserInfo  获取用户基本信息
                        - 参数: appid
                        - 参数: code
            **/
            userInfoApi += this.code;

            axios.get(userInfoApi)
                .then(res=>{
                    console.log(res);
                    this.user = res.data.data
                })

        }else{
             setTimeout(()=>{
                window.location.href=userinfo_url;
            },3000)
        }
       
        
    },
    mounted() {

    },
    methods: {
        // 从url获取指定key的值
        // 比如url = xxx.com?k1=v1&k2=v2&k3=v3...    getUrlParams(k1) ==> v1 ;..
        getUrlParams(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    },
};
</script>

<style scoped lang="scss">

</style>
